<template>
	<view class="mydetail-body">
		<view class="touxiang-view tn-padding tn-text-center">
			<image class="touxiang-image" src="../../static/login_top3.png" mode=""></image>
		</view>
		<view class="tn-flex tn-flex-row-between tn-padding-left tn-padding-right tn-margin-bottom-sm">
			<view class="justify-content-item width-180">
				<text>姓名</text>
			</view>
			<view class="justify-content-item tn-flex-1">
				<text>{{childInfo.name}}</text>
			</view>
			<view class="justify-content-item" @click="changeInfo('xingming')">
				<text style="color: #01BEFF;">修改</text>
			</view>
		</view>
		<view class="tn-flex tn-flex-row-between tn-padding-left tn-padding-right tn-margin-bottom-sm">
			<view class="justify-content-item width-180">
				<text>班级</text>
			</view>
			<view class="justify-content-item tn-flex-1">
				<text>{{childInfo.className}}</text>
			</view>
			<view class="justify-content-item">
				<text style="color: #01BEFF;" @click="changeInfo('zhuanban')">转班</text>
			</view>
		</view>
		<view class="tn-flex tn-flex-row-between tn-padding-left tn-padding-right tn-margin-bottom-sm">
			<view class="justify-content-item width-180">
				<text>学号</text>
			</view>
			<view class="justify-content-item tn-flex-1">
				<text>{{childInfo.studentNumber}}</text>
			</view>
			<view class="justify-content-item">
				<text style="color: #01BEFF;" @click="changeInfo('xuehao')">修改</text>
			</view>
		</view>
		<view class="tn-flex tn-flex-row-between tn-padding-left tn-padding-right tn-margin-bottom-sm">
			<view class="justify-content-item width-180">
				<text>性别</text>
			</view>
			<view class="justify-content-item tn-flex-1">
				<text>{{genders[childInfo.gender]}}</text>
			</view>
			<view class="justify-content-item">
				<text style="color: #01BEFF;" @click="changeInfo('xingbie')">修改</text>
			</view>
		</view>
		<view class="tn-flex tn-flex-row-between tn-padding-left tn-padding-right tn-margin-bottom-sm">
			<view class="justify-content-item width-180">
				<text>出生日期</text>
			</view>
			<view class="justify-content-item tn-flex-1">
				<text>{{childInfo.birthdayStr}}</text>
			</view>
			<view class="justify-content-item">
				<text style="color: #01BEFF;" @click="changeInfo('chushengriqi')">修改</text>
			</view>
		</view>
		<view class="border-line-view tn-border-black tn-margin-bottom-sm"></view>
		<view class="tn-padding-left tn-padding-right tn-margin-bottom-sm">家长信息</view>
		<view class="">
			  <block v-for="(item, index) in jiazhangList" :key="index">
			    <view class="article-shadow tn-margin" >
			      <view class="tn-flex">
					<view class="tn-flex tn-flex-col-center tn-padding-right-sm">
						<tn-avatar size="lg" :src="item.avatarUrl"></tn-avatar>
					</view>
			        <view class="tn-margin-sm tn-padding-top-xs tn-flex-direction-column" style="width: 100%;">
			          <view class="tn-text-md clamp-text-1 tn-margin-bottom-sm">
			            <text class="tn-padding-right-sm">关系</text> {{ relationships[item.relationship] }}
			          </view>
			          <view class="tn-text-md clamp-text-1 tn-margin-bottom-sm">
			            <text class="tn-padding-right-sm">姓名</text>  {{ item.name }}
			          </view>
			          <view class="tn-text-md  clamp-text-1">
			            <text class="tn-padding-right-sm">手机</text>  {{ item.phoneNumber }}
			          </view>
			        </view>
					<view class="tn-flex tn-flex-col-center width-80">
						<view style="color: #01BEFF;" @click="xiugaijiazhang(item)">修改</view>
					</view>
			      </view>
			    </view>
			  </block>
		</view>
		<tn-modal
		  v-model="showtnmodal"
		  :radius="10"
		  :button="button"
		  :maskCloseable="true"
		  :zoom="true"
		  :custom="true"
		  @click="clickBtn"
		>
		  <view>
			<view class="custom-modal-content">
				  <tn-form :labelWidth="120" class="tn-margin-bottom">
					<tn-form-item v-if="changeType=='xingming'" label="姓名" :borderBottom="false">
					  <tn-input placeholder="请输入姓名" v-model="childName" border></tn-input>
					</tn-form-item>
					<tn-form-item v-if="changeType=='xuehao'" label="学号" :borderBottom="false">
					  <tn-input placeholder="请输入学号" v-model="studentNumber" border></tn-input>
					</tn-form-item>
				  </tn-form>
				<view class="tn-flex tn-flex-row-between">
					<tn-button class="opo-bottom-btn" shape="round" @click="closedPopup()" width="150rpx" backgroundColor="#A4E82F" fontColor="#ffffff">关闭</tn-button>
					<tn-button class="opo-bottom-btn" shape="round" @click="submitChange()" width="150rpx" backgroundColor="#01BEFF" fontColor="#ffffff">确认</tn-button>
				</view>
			</view>
		  </view>
		</tn-modal>
		
		<tn-select
		  v-model="showxingbieSelect"
		  mode="single"
		  title="请选择性别"
		  :list="xingbielist"
		  :maskCloseable="true"
		  @confirm="confirmSelect"
		  :defaultValue="defaultXingbie"
		>
		</tn-select>
		
		<tn-select
		  v-model="showzhuanbanSelect"
		  mode="single"
		  title="请选择班级"
		  :list="banjilist"
		  :maskCloseable="true"
		  @confirm="confirmbanjiSelect"
		>
		</tn-select>
		
		<tn-picker
		  v-model="showriqipocker"
		  mode="time"
		  :showTimeTag="true"
		  :maskCloseable="true"
		  :defaultTime="defaultTime"
		  @confirm="confirmTimePicker"
		>
		</tn-picker>
		
		<tn-modal
		  v-model="showjiazhangmodal"
		  :radius="10"
		  :maskCloseable="true"
		  :zoom="true"
		  :custom="true"
		>
		  <view>
			<view v-if="currentJiazhang" class="custom-modal-content">
				  <tn-form :labelWidth="120" class="tn-margin-bottom">
					<tn-form-item label="关系" :borderBottom="false">
					  <view class="guanxi-view" @click="showguanxiSelect = true">{{relationships[currentJiazhang.relationship]}}</view>
					</tn-form-item>
					<tn-form-item label="姓名" :borderBottom="false">
					  <tn-input placeholder="请输入姓名" v-model="currentJiazhang.name" border></tn-input>
					</tn-form-item>
					<tn-form-item label="手机" :borderBottom="false">
					  <tn-input placeholder="请输入手机" v-model="currentJiazhang.phoneNumber" border></tn-input>
					</tn-form-item>
				  </tn-form>
				<view class="tn-flex tn-flex-row-between">
					<tn-button class="opo-bottom-btn" shape="round" @click="closedguanxiPopup()" width="150rpx" backgroundColor="#A4E82F" fontColor="#ffffff">关闭</tn-button>
					<tn-button class="opo-bottom-btn" shape="round" @click="comfirmguanxiPopup()" width="150rpx" backgroundColor="#01BEFF" fontColor="#ffffff">确认</tn-button>
				</view>
			</view>
		  </view>
		</tn-modal>
		
		<tn-select
		  v-model="showguanxiSelect"
		  mode="single"
		  title="请选择家长关系"
		  :list="guanxilist"
		  :maskCloseable="true"
		  @confirm="confirmguanxiSelect"
		>
		</tn-select>
		<tn-toast
		  ref="toast"
		></tn-toast>
	</view>
</template>

<script>
	export default{
		name: 'youerliebiao',
		data(){
			return {
				jiazhangList: [],
				currentJiazhang: null,
				button:[
				  {
					text: '取消',
					backgroundColor: '#A4E82F',
					fontColor: '#FFFFFF'
				  },
				  {
					text: '确定',
					backgroundColor: 'tn-bg-indigo',
					fontColor: '#FFFFFF'
				  }
				],
				showtnmodal: false,
				changeType: '',
				showxingbieSelect: false,
				xingbielist: [
					{ value: 1, label: '男' },
					{ value: 2, label: '女' },
				],
				genders:{
					0: '未知',
					1: '男',
					2: '女'
				},
				showzhuanbanSelect: false,
				banjilist: [],
				showriqipocker: false,
				showjiazhangmodal: false,
				guanxilist: [
					{label: '父亲', value: 0},
					{label: '母亲', value: 1},
					{label: '爷爷', value: 2},
					{label: '奶奶', value: 3},
					{label: '外公', value: 4},
					{label: '外婆', value: 5},
				],
				showguanxiSelect: false,
				childInfo: {},
				relationships:{
					0: '父亲',
					1: '母亲',
					2: '爷爷',
					3: '奶奶',
					4: '外公',
					5: '外婆',
				},
				childName: '',
				studentNumber: '',
				selectGender: '',
				birthday: '',
				defaultXingbie: [],
				defaultTime: '',
			}
		},
		onShow() {
			let childInfo = uni.getStorageSync('childInfo');
			console.log('childInfo ==== ',childInfo)
			if(childInfo){
				this.childInfo = childInfo;
				this.jiazhangList = childInfo.parentList;
			}
			let banjiliebiao = uni.getStorageSync('banjiliebiao')
			if(banjiliebiao){
				this.banjilist = banjiliebiao.map(item => {
					item.value = item.id;
					item.label = item.name;
					return item;
				});
			}
		},
		methods:{
			xiugaijiazhang(item){
				this.currentJiazhang = JSON.parse(JSON.stringify(item));
				this.showjiazhangmodal = true;
			},
			confirmguanxiSelect(val){
				this.currentJiazhang.relationship = val[0].value;
			},
			isPhone(tel) { 
				var regx = /^1[34578]\d{9}$/; 
				return regx.test(tel);
			},
			comfirmguanxiPopup(){
				if(!this.currentJiazhang.relationship){
					this.$refs.toast.show({
					  title: '',
					  content: '请选择家长关系',
					  icon: 'fail',
					  image: '',
					  duration: 1000
					})
					return;
				}
				if(!this.currentJiazhang.name){
					this.$refs.toast.show({
					  title: '',
					  content: '请填写正确的姓名',
					  icon: 'fail',
					  image: '',
					  duration: 1000
					})
					return;
				}
				if(!this.isPhone(this.currentJiazhang.phoneNumber)){
						this.$refs.toast.show({
						  title: '',
						  content: '请填写11位电话号码',
						  icon: 'fail',
						  image: '',
						  duration: 1000
						})
					return;
				}
					this.request({
						url: '/Children/MobileUpdateParentRelation',
						method: 'post',
						params: {
							"childId": this.childInfo.id,
							  "parentId": this.currentJiazhang.parentId,
							  "relationship": this.currentJiazhang.relationship,
							  "parentName": this.currentJiazhang.name,
							  "phoneNumber": this.currentJiazhang.phoneNumber,
						},
					}).then(res => {
						if(res.code == 200){
							this.$refs.toast.show({
							  title: '',
							  content: '更改成功',
							  icon: 'success',
							  image: '',
							  duration: 1000
							})
							this.showjiazhangmodal = false;
							this.currentJiazhang = null;
						}else{
							this.$refs.toast.show({
							  title: '',
							  content: res.message || '更改失败',
							  icon: '',
							  image: '',
							  duration: 1000
							})
						}
					})
			},
			closedguanxiPopup(){
				this.showjiazhangmodal = false;
				this.currentJiazhang = null;
			},
			changeInfo(type){
				this.changeType = type;
				if(type == 'xingming' ){
					this.showtnmodal = true;
					this.childName = this.childInfo.name;
				}else if(type == 'xuehao'){
					this.showtnmodal = true;
					this.studentNumber = this.childInfo.studentNumber;
				}else if(type == 'xingbie'){
					this.showxingbieSelect = true;
					let _item = this.xingbielist.findIndex(item => {return item.value == this.childInfo.gender})
					if(_item >= 0){
						this.defaultXingbie = [_item]
					}
					
				}else if(type == 'zhuanban'){
					this.showzhuanbanSelect = true;
				}else if(type == 'chushengriqi'){
					this.showriqipocker = true;
					this.defaultTime = this.childInfo.birthdayStr;
				}
			},
		    clickBtn(event) {
				console.log('event ---- ', event);
				this.showtnmodal = false;
				if(event.index == 1){
					// this.$t.message.toast('点击了确定个按钮');
					
				}
		    },
			submitChange(){
				let postData = {
						"id": this.childInfo.id,
						  "name": this.childInfo.name,
						  "studentNumber": this.childInfo.studentNumber,
						  "birthday": this.childInfo.birthday,
						  "gender": this.childInfo.gender,
						  "homeAddress": this.childInfo.homeAddress,
						  "classesId": this.childInfo.classesId,
				}
				if(this.changeType == 'xingming'){
					if(!this.childName){
						this.$refs.toast.show({
						  title: '',
						  content: '请填写正确的姓名',
						  icon: 'fail',
						  image: '',
						  duration: 1000
						})
						return;
					}
					postData.name = this.childName;
				}else if(this.changeType == 'xuehao'){
					if(!this.studentNumber){
						
							this.$refs.toast.show({
							  title: '',
							  content: '请填写正确的学号',
							  icon: 'fail',
							  image: '',
							  duration: 1000
							})
						return;
					}
					postData.studentNumber = this.studentNumber;
				}
				this.postChildInfo(postData);
			},
			closedPopup(){
				this.showtnmodal = false;
				this.childName = '';
				this.studentNumber = '';
			},
			cancelSelect(){
				this.showxingbieSelect = false;
			},
			confirmSelect(val, label){
				this.showxingbieSelect = false;
				// this.$t.message.toast('选择了'+ val+'-----'+label)
				console.log(val)
				if(!val.length){return};
					let postData = {
							"id": this.childInfo.id,
							  "name": this.childInfo.name,
							  "studentNumber": this.childInfo.studentNumber,
							  "birthday": this.childInfo.birthday,
							  "gender": val[0].value,
							  "homeAddress": this.childInfo.homeAddress,
							  "classesId": this.childInfo.classesId,
					}
				this.selectGender = val[0].value;
				this.postChildInfo(postData);
			},
			confirmbanjiSelect(val, label){
				this.showzhuanbanSelect = false;
				// this.$t.message.toast('选择了'+ val+'-----'+label)
				console.log(val)
				if(!val || !val.length){return;}
					this.request({
						url: '/Children/MobileShiftTransfers',
						method: 'post',
						params: {
							childId: this.childInfo.id,
							classId: val[0].value
						},
					}).then(res => {
						if(res.code == 200){
							this.$refs.toast.show({
							  title: '',
							  content: '更改成功',
							  icon: 'success',
							  image: '',
							  duration: 1000
							})
							this.childInfo.classesId = val[0].value;
							this.childInfo.className = val[0].label;
						}else{
							this.$refs.toast.show({
							  title: '',
							  content: res.message || '更改失败',
							  icon: '',
							  image: '',
							  duration: 1000
							})
						}
					})
			},
			confirmTimePicker(val){
				this.showriqipocker = false;
				if(!val){return}
				this.birthday = val.year + '-' + val.month + '-' + val.day;
					let postData = {
							"id": this.childInfo.id,
							  "name": this.childInfo.name,
							  "studentNumber": this.childInfo.studentNumber,
							  "birthday": this.birthday,
							  "gender": this.childInfo.gender,
							  "homeAddress": this.childInfo.homeAddress,
							  "classesId": this.childInfo.classesId,
							  "childParentInputList":this.childInfo.childParentInputList,
					}
				this.postChildInfo(postData);
			},
			postChildInfo(postData){//api/Children/MobileEdit
					this.request({
						url: '/Children/MobileEdit',
						method: 'post',
						params: postData,
					}).then(res => {
						if(res.code == 200){
							this.$refs.toast.show({
							  title: '',
							  content: '更改成功',
							  icon: 'success',
							  image: '',
							  duration: 1000
							})
							
							if(this.changeType == 'xingming'){
								this.childInfo.name = this.childName;
								this.closedPopup();
							}else if(this.changeType == 'xuehao'){
								this.childInfo.studentNumber = this.studentNumber;
								this.closedPopup();
							}else if(this.changeType == 'xingbie'){
								this.childInfo.gender = this.selectGender;
								this.showxingbieSelect = false;
								this.selectGender = '';
							}else if(this.changeType == 'zhuanban'){
								
							}else if(this.changeType == 'chushengriqi'){
								this.childInfo.birthday = this.birthday;
								this.showriqipocker = false;
								this.birthday = '';
							}
						}else{
							this.$refs.toast.show({
							  title: '',
							  content: res.message || '更改失败',
							  icon: '',
							  image: '',
							  duration: 1000
							})
						}
					})
			},
		},
	}
	
</script>

<style lang="scss" scoped>
	.mydetail-body{
		
		  min-height: 100vh;
			  background-color: rgba(245, 245, 245, 1);
	}
	.touxiang-image{
		width: 200rpx;
		height: 200rpx;
		border-radius: 100rpx;
		border: 1px solid #dddddd;
	}
	.width-180{
		width: 180rpx;
	}
	.width-80{
		width: 80rpx;
	}
	.guanxi-view{
		width: 100%;
		padding-left: 10rpx;
		border: 1px solid #dddddd;
		border-radius: 2px;
		
	}
</style>